<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="">
    <el-input v-model="formInline.levelMemberName" :placeholder="$t('请输入会员名称')" clearable></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="info" icon="el-icon-search" v-permission="['GET /admin/p/member_level_index']" @click="handleFilter">{{$t('Search')}}</el-button>
    <el-button type="warning" plain1 icon="el-icon-circle-plus" v-permission="['GET /admin/p/member_level_add']" @click="handleCreate">{{$t('Add')}}</el-button>
  </el-form-item>
</el-form>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit highlight-current-row>
       <el-table-column  align="center" type="index" :label="$t('序号')" :index="getIndex" width="50"></el-table-column>
      <el-table-column align="center" :label="$t('会员等级名称')" prop="name"/>
      <el-table-column align="center" :label="$t('人数')" prop="numbers"/>
      <el-table-column align="center" :label="$t('占比')" prop="per"/>
      <el-table-column align="center" :label="$t('有效期')" prop="expiredDays" >
        <template slot-scope="scope">
        <span>{{formateExpiredDays(scope)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('升级条件')" prop="upgradeMoney">
        <template slot-scope="scope">
        <span v-if='scope.row.upgradeMoney'>{{$t('累计消费金额')}}{{'$'}}:{{scope.row.upgradeMoney}}</span>
        <span v-if='scope.row.upgradePoint'>{{$t('累计消费积分')}} {{scope.row.upgradePoint}}</span>
        <span v-if='scope.row.upgradeMoney==undefined && scope.row.upgradePoint==undefined'>无</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('保级规则')" prop="saveLevelMoney">
           <template slot-scope="scope" >
             <span v-if='scope.row.saveLevelMoney'>{{$t('累计消费金额')}}${{scope.row.saveLevelMoney}}</span>
        <span v-if='scope.row.saveLevelPoint'>{{$t('累计消费积分')}}{{scope.row.saveLevelPoint}}</span>
        <span v-if='scope.row.saveLevelPoint==undefined && scope.row.saveLevelMoney==undefined'>无</span>

        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('是否默认')" prop="isDefault">
             <template slot-scope="scope">
          <el-tag type="info" effect="plain1">{{formateDefault(scope)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('添加时间')" prop="addTime"/>
      <el-table-column align="center" :label="$t('状态')" prop="type">
        <template slot-scope="scope">
          <el-tag>{{$t(scope.row.status==1?'增加':scope.row.status==2?"启用":scope.row.status==3?'停用':scope.row.status)}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('Operate')" width="250" class-name="small-padding fixed-width">
        <template slot="header" slot-scope="{row}">
          {{$t('Operate')}}
          <i class="el-icon-setting"style="color: #d35e32"></i>
        </template>
        <template slot-scope="scope">
              <el-button icon="el-icon-view"  type="info" plain1 size="mini" v-permission="['GET /admin/p/member_level_detail']" @click="handleDetail(scope.row)">{{$t(scope.row.status!=2 ? '编辑':'查看')}}</el-button>

          <el-button type="danger" icon="el-icon-delete" v-if="scope.row.status!=2 && scope.row.pid" plain1 size="mini" @click="handleDelete(scope.row)" v-permission="['GET /admin/p/member_level_delete']">{{$t('Delete')}}</el-button>

          <el-button  v-if="scope.row.status!=2" icon="el-icon-turn-off" type="warning" plain1 size="mini" @click="open(scope.row)" v-permission="['GET /admin/p/member_level_status']">{{$t('Enable')}}</el-button>
          <el-button  v-if="scope.row.status==2" icon="el-icon-open" type="warning" plain1 size="mini" @click="open(scope.row)" v-permission="['GET /admin/p/member_level_status']">{{$t('Disable')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-tooltip placement="top" :content="$t('Back_to_top')">
      <back-to-top :visibility-height="100" />
    </el-tooltip>
  </div>
</template>
<script>
  import ElSelectDropdown from 'element-ui/packages/select/src/select-dropdown'
  import BackToTop from '@/components/BackToTop'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import { levelMemberList,levelupdateStatus ,levelMemberDelete} from "@/api/user";

  export default {
    name: "MemberLevelSetting",
    components: { ElSelectDropdown, BackToTop, Pagination },
    data() {
      const typeMap = ['','全场通用']
      return {
        value1: '',
         formInline: {
          levelMemberName:undefined,
          page: 1,
          limit: 20,
          sort: 'add_time',
          order: 'desc'
        },
        typeMap,
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20,
          name: undefined,
          sort: 'add_time',
          order: 'desc'
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList(){
             this.listLoading = true
        levelMemberList(this.formInline).then(res=>{
           this.list = res.data.data.list
             this.total = res.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
      formateExpiredDays(scope){
        return scope.row.expiredDays==0? this.$t('永久有效'):scope.row.expiredDays+ this.$t('天')
      },
      formateDefault(scope){
        return scope.row.pid==null? this.$t('是'): this.$t('否')
      },
      handleDelete(row){
        this.$confirm(this.$t('Confirm_Delete?'), this.$t('Hint'), {
          confirmButtonText: this.$t('Confirm'),
          cancelButtonText: this.$t('Cancel'),
          type: 'warning'
        }).then(() => {
          this.doDelete(row)
        });
      },
      doDelete(row){
        var memberId = row.id
        levelMemberDelete(memberId).then(response => {
          this.$notify.success({
            title: this.$t('Success!'),
            message: this.$t('Deleted')
          })
          const index = this.list.indexOf(row)
          this.list.splice(index, 1)
        }).catch(response => {
          this.$notify.error({
            title: this.$t('Failed'),
            message: this.$t(response.data.errmsg)
          })
        })
      },
      handleFilter(){
         this.getList()
      },
      handleCreate(){//新增
        this.$router.push({path:'/user/MemberLevelSetting/addedUser',query:{type: 1,dialogStatus: 'create'}})
      },

      handleDetail(row){//跳转详情
        this.$router.push({path: '/user/MemberLevelSetting/addedUser',query:{id: row.id,type: 2,status: row.status,dialogStatus:'update'}})

      },
        // 更改状态
      updateStatus(row){

        // return

      },
       open(row) {
             var mag=  row.status==1?'新增':row.status==2?"停用":row.status==3?'启用':row.status
        // var mag= row.status==0?'上架':row.status==1?"下架":row.status==2?'上架':row.status
        this.$confirm('确定'+mag+'吗?, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              levelupdateStatus({memberId:row.id}).then(res=>{
            this.$message({
            type: 'success',
            message: mag+'成功!'
          });
          this.getList()
        }).catch(response => {
                this.$notify.error({
                  title: this.$t('Failed'),
                  message: this.$t(response.data.errmsg)
                })
              })
        //        updateStatus(row.id).then(res=>{
        //   console.log(res)

        // })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功'
          });
        });
      },
      getIndex(index) {
        return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
      }
    }
  }
</script>

<style scoped>
  /*.daytime{*/
  /*  color: #606266;font-size: 14px;font-weight: 700;*/
  /*}*/
</style>
